<template>
  <div class="header">
    <div class="nav w">
      <div class="logo" @click="$router.push('/home')">
        <img src="@/assets/logo.png" alt="" />
      </div>
      <div class="list" @click="tabList">
        <router-link to="/home">首页</router-link>
        <router-link to="/agent">房产经纪</router-link>
        <router-link to="/category">地产分类</router-link>
        <router-link to="/aboutOur">关于我们</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    tabList(e) {//切换导航
      const alist = document.querySelectorAll(".list a");
      alist.forEach((item) => (item.className = ""));
      e.target.className = "isActive";
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 60px;
  background-color: #f6f6f6;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}
.nav {
  display: flex;
  .logo {
    margin-top: 5px;
    margin-left: 10px;
  }
  img {
    width: 50px;
  }
  .list {
    flex: 1;
    margin-left: 100px;
    display: flex;
    a {
      display: block;
      padding: 0 20px;
      color: #000;
      height: 55px;
      line-height: 55px;
      &:hover {
        color: #409eff;
        border-bottom: 5px solid #409eff;
      }
      &.isActive {
        color: #fff;
        border-bottom: 5px solid #409eff;
        background-color: #409eff;
      }
    }
  }
}
</style>